<template>
  <div>
    <span class="float-left text-[18px] font-weight mr-2 mt-1">=</span>
    <div
      class="flex items-center mt-1"
      v-for="(item, index) in formulaStructure"
      :key="index"
    >
      <el-select
        v-if="index !== 0"
        v-model="item.operator"
        placeholder="运算"
        clearable
        class="w-[80px] text-center mr-1 ml-[18px]"
      >
        <el-option
          v-for="(label, value) in computeOperatorMap"
          :key="value"
          :label="label"
          :value="value"
        />
      </el-select>
      <el-select
        v-model="item.ele"
        placeholder="字段"
        clearable
        class="w-[160px] text-center mr-1"
      >
        <el-option
          v-for="(item, index) in calcEleOptions"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
        <template #footer>
          <el-button v-if="!isAdding" text bg size="small" @click="onAddOption">
            自定义输入
          </el-button>
          <template v-else>
            <el-input
              v-model="item.ele"
              placeholder="请输入数字"
              type="number"
              class="w-20 mr"
              size="small"
            />
            <el-button type="primary" size="small" @click="onConfirm(index)">
              确定
            </el-button>
            <el-button size="small" @click="clear(index)">取消</el-button>
          </template>
        </template>
      </el-select>
      <div class="flex">
        <CirclePlus
          class="text-blue-500 cursor-pointer hover:text-blue-300 mr-1"
          size="5"
          @click="handleAddFormula(index)"
        />
        <CircleClose
          v-if="index !== 0"
          class="text-red-800 cursor-pointer hover:text-red-300"
          size="5"
          @click="handleRemoveFormula(index)"
        />
      </div>
    </div>
    <hr />
    <div class="font-bold">
      =
      <template v-for="(item, index) in formulaStructure" :key="index">
        <span v-if="item.ele && !item.operator" class="text-blue-600">{{
          orderAttrsMap[item.ele] || item.ele
        }}</span>
        <span v-else-if="item.ele && item.operator">
          &nbsp;<span class="text-[16px] text-orange-500 align-middle">{{
            opeartorSymbolMap[item.operator] || "[运算法则]"
          }}</span
          >&nbsp;&nbsp;<span class="text-blue-600">{{
            orderAttrsMap[item.ele] || item.ele
          }}</span></span
        >
      </template>
    </div>
  </div>
</template>
<script setup>
import { CircleClose, CirclePlus } from "@element-plus/icons-vue";
import {
  computeCols,
  computeOperatorMap,
  opeartorSymbolMap,
  orderAttrsMap,
} from "../../../../../utils/map";
const formulaStructure = defineModel();
const emit = defineEmits();
const props = defineProps({});
const isAdding = ref(false);
const calcEleOptions = ref(
  computeCols.map((item) => ({
    value: item,
    label: orderAttrsMap[item],
  }))
);
function onAddOption() {
  isAdding.value = true;
}
function onConfirm(index) {
  isAdding.value = false;
  let value = formulaStructure.value[index].ele;
  calcEleOptions.value.push({ label: value, value });
}
function clear(index) {
  isAdding.value = false;
  formulaStructure.value[index].ele = "";
}
function handleAddFormula(index) {
  formulaStructure.value.splice(index + 1, 0, {
    index: index + 1,
    operator: "",
    manual: "",
    ele: "",
  });
}
function handleRemoveFormula(index) {
  formulaStructure.value.splice(index, 1);
}
</script>